<template>
  <div>
      <!-- 头部标签 -->
 <header>
     <van-nav-bar
  title="快递单"
  left-arrow
  @click-left="onClickLeft"
  
/>
 </header>
 <!-- 搜索框 -->
 <div class="search">
     <van-search
  v-model="value"
  show-action
   shape="round"
  placeholder="关键词查询"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
 </div>
 <!-- 内容详情 -->
  <div>
 <div class="list"  v-for='(item,index) in records' :key='index'>
      <br>
<van-row type="flex" justify="center">
  <van-col span="5">快递单号</van-col>
  <van-col span="13">{{item.orderCode}}</van-col>
  <van-col span="2"><van-icon name="arrow"   /></van-col>
</van-row>
<!-- 分割线 -->
<van-divider
  :style="{ borderColor: 'gray',paddingTop: '.1rem' }"
>
</van-divider>
 <!-- 卡片 -->
 <van-card :style="{paddingTop: '.1rem' }"
  :thumb="item.imgs[0]"
>
 <template #tags >
    
     <p>下单时间  <i>{{item.createTime}}</i></p>
      <p><span>收货人</span> {{item.consignee}}</p>
     <p> <span>发货人</span>  <i>{{item.consignor}}</i></p>
  </template>
</van-card>
<!-- 按钮 -->
<van-row type="flex" justify="center" :style="{paddingTop: '.1rem' }">
  <van-col span="16"></van-col>
  <van-col span="8"><van-button  @click="$router.push({name:'/star/evaluate',params:{id:item.id,val:item.orderCode}})" color="#ffcc33" round v-if='item.info==null'>评价</van-button>
  <van-button @click="$router.push({name:'evaInfo',params:{id:item.id}})" color="#ffcc33" round v-else-if='item.info'>查看评价</van-button>
  </van-col>
</van-row>
    </div>
  </div>
  </div>
</template>

<script>
import {getStar} from '../../request/api'
export default {
  data(){
    return{
          value: '',
            active: 2,
            records:[]
    }
  },
  created(){
    //   物流单请求
      getStar({
        keyword:'',
          size:"2"
      }).then(res=>{
          console.log(res.data.records);
          this.records=res.data.records
      })
  },
   methods: {
    onClickLeft() {
      this.$router.push('/login')
    },
      onSearch(val) {
      Toast(val);
    },
    
  },
}
</script>

<style lang='less'  >
*{
    font-size: .18rem!important;
}
header{
    background: #003399;
    .van-nav-bar{background:#003399;
font-size: .2rem;
padding:3% 0 0;
.van-nav-bar__title{
    color: white;
    font-size: .2rem;
}
.van-icon{
    font-size: .2rem;
    color: white;
}
     }
    
}

.van-tabs__line{
    background-color: yellow;
}
.search{
   .van-search__action{
        color:#003399;
    }
}
.list{
  margin: 5% 0;
}
</style>